<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../cwjy/css/app.css" rel="stylesheet">
    <style>
        html::-webkit-scrollbar {
            display: none
        }
    </style>
</head>
<script src="../cwjy/js/app.js"></script>
<script src="../cwjy/js/jquery.min.js"></script>
<body>
<div class="card">
    <div class="card-header">
        <div>
            <div style="float:left;">
                <span style="font-weight: bold;font-size: 20px;text-shadow: 1px 1px 2px #000000;">购物车详细</span>
            </div>
            <!--      <div style="float: right;margin-right: 7%">
                      <button type="button"  data-feather="plus-circle" data-toggle="modal"
                              data-target="#defaultModalPrimary" onclick="initMode('addData()')"></button>
                  </div>-->
        </div>
        <table class="table table-striped" cellpadding="0" cellspacing="0">
            <thead>
            <tr>
                <th style="width:5%;">选择</th>
                <th style="width:5%;">序号</th>
                <th style="width:10%;">商品名称</th>
                <th style="width:10%;">商品展示</th>
                <th style="width:5%">销售价格</th>
                <th style="width:5%">邮费</th>
                <th style="width:10%">留言</th>
                <th style="width:10%">类型</th>
                <th style="width:5%">数量</th>
                <th style="width:15%">收货地址</th>
                <th class="d-none d-md-table-cell" style="width:10%">创建时间</th>
                <th style="width:10%">总价</th>
            </tr>
            </thead>
            <tbody id="tbodyDiv">

            </tbody>
        </table>
    </div>
</div>

<!--模态框-->

<div class="modal fade" id="defaultModalPrimary" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header" id="modelHead">
                <h3 class="modal-title" id="modelHeadText1" style="font-weight: bold;text-shadow: 1px 1px 3px #000000;">
                    收货地址</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body m-3">
                <div class="card-body" id="modelDiv">
                    <div class="row" style="margin-top: -6%">
                        <fieldset class="mb-3" id="pet_type"
                                  style="font-weight: bold;text-shadow: 1px 1px 3px #000000;font-size: 1.0vw">
                            <div class="row">
                                <div class="col-sm-10" id="addressRadio">
                                    <label class="form-check" style="margin-bottom: 10px">
                                        <input name="radio-3" type="radio" id='1' class="form-check-input" checked>
                                        <span class="form-check-label">江西省南昌市青云谱区气象路48号</span>
                                    </label>
                                    <label class="form-check" style="margin-bottom: 10px">
                                        <input name="radio-3" type="radio" id='2' class="form-check-input">
                                        <span class="form-check-label">江西省南昌市青云谱区气象路48号</span>
                                    </label>
                                    <label class="form-check" style="margin-bottom: 10px">
                                        <input name="radio-3" type="radio" id='3' class="form-check-input">
                                        <span class="form-check-label">江西省南昌市青云谱区气象路48号</span>
                                    </label>
                                    <label class="form-check" style="margin-bottom: 10px">
                                        <input name="radio-3" type="radio" id='4' class="form-check-input">
                                        <span class="form-check-label">江西省南昌市青云谱区气象路48号</span>
                                    </label>
                                    <label class="form-check" style="margin-bottom: 10px">
                                        <input name="radio-3" type="radio" id='5' class="form-check-input">
                                        <span class="form-check-label">江西省南昌市青云谱区气象路48号</span>
                                    </label>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                </div>
            </div>
            <div class="modal-footer" id="modelAction">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="addOrder()">提交</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="../cwjy/js/ajaxAll.js"></script>

<script type="text/javascript">

    let shoppingCartDataCache;

    function getPageshoppingCartData() {
        let url = "http://localhost:8888/cwjy/ShoppingCart/getPage";
        let json = {};
        $.ajax({
            type: 'post',
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: url,    //请求发送到Servlet
            contentType: 'application/json;charset=UTF-8',//指定消息请求类型
            data: JSON.stringify(json),
            timeout: 10000,    //超时10s
            success: function (res) {
                shoppingCartDataCache = res.data;
                forEachShoppingCartData();
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert('数据请求失败!');
            }
        });
    }


    getPageshoppingCartData();

    function forEachShoppingCartData() {
        let tbodyDiv = "";
        for (let i = 0; i < shoppingCartDataCache.length; i++) {
            let address = shoppingCartDataCache[i].order_shipping_entity.receiver_state +
                shoppingCartDataCache[i].order_shipping_entity.receiver_city +
                shoppingCartDataCache[i].order_shipping_entity.receiver_district +
                shoppingCartDataCache[i].order_shipping_entity.receiver_address;
            let temp = " <tr id = '" + shoppingCartDataCache[i].id + "'>\n" +
                "                    <td><input type='checkbox' onchange='test()'></td>\n" +
                "                    <td>" + (i + 1) + "</td>\n" +
                "                    <td>" + shoppingCartDataCache[i].commodity_entity.product_name + "</td>\n" +
                "                    <td><img src=\"http://localhost:8888/cwjy/images/" + shoppingCartDataCache[i].commodity_entity.image_path + "\" style=\"width: 50px;height: 50px;\"/></td>\n" +
                "                    <td>" + shoppingCartDataCache[i].payment + "</td>\n" +
                "                    <td>" + shoppingCartDataCache[i].post_fee + "</td>\n" +
                "                    <td>" + shoppingCartDataCache[i].buyer_message + "</td>\n" +
                "                    <td>" + shoppingCartDataCache[i].commodity_type + "</td>\n" +
                "                    <td>" + shoppingCartDataCache[i].commodity_num + "</td>\n" +
                // "                    <td><input type='text' style='text-align: center' class='form-control' value='" + shoppingCartDataCache[i].commodity_num + "'></td>\n" +
                "                    <td>" + address + "</td>\n" +
                "                    <td>" + shoppingCartDataCache[i].create_date + "</td>\n" +
                "                    <td>" + (shoppingCartDataCache[i].payment * shoppingCartDataCache[i].commodity_num) + "</td>\n" +
                "                </tr>";
            tbodyDiv += temp;
        }
        $('#tbodyDiv').html(tbodyDiv)
    }


    let addOrderArray = [];
    let deleteShoppingCartData = [];
    let total = 0;
    let post_fee = 0;
    let shopping_cart_id = [];
    let buyer_message = "";
    function test() {
        total = 0;
        addOrderArray = [];
        post_fee = 0;
        let count = 0;
        $("#tbodyDiv input").each(function () {
            if ($(this).is(":checked")) {
                count++;
                let id = $(this).parent().parent()[0].id;
                let data = getDataIdData(shoppingCartDataCache, id)
                let num = (data.payment * data.commodity_num);
                total += num;
                post_fee += parseInt(data.post_fee);
                buyer_message += data.buyer_message;
                /*    let json = {
                        "payment": data.payment, "post_fee": data.post_fee, "commodity_id": data.commodity_id,
                        "buyer_message": data.buyer_message, "commodity_type": data.commodity_type, "order_shipping_id": data.order_shipping_id
                        , "commodity_num": data.commodity_num,"shopping_cart_id":id,"pic_path": data[i].commodity_entity.image_path
                    }*/
                shopping_cart_id[shopping_cart_id.length] = id;
                let json = {
                    "price": data.payment, "item_id": data.commodity_id,
                    "pic_type": data.commodity_type, "num": data.commodity_num,
                    "pic_path": data.commodity_entity.image_path,
                    "totle_fee": num
                }
                addOrderArray[addOrderArray.length] = json;
            }
        })
        $('#cartPriceTotal').html(total)
        $('#cartNum').html(count)
    }

    function addOrderInit() {
        getAddress();
    }

    function getAddress() {
        $.ajax({
            type: 'post',
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: 'http://localhost:8888/cwjy/OrderShipping/getPage',    //请求发送到Servlet
            contentType: 'application/json;charset=UTF-8',//指定消息请求类型
            data: JSON.stringify({}),
            timeout: 10000,    //超时10s
            success: function (res) {
                forEachAddress(res.data)
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert('数据请求失败!');
            }
        });
    }

    function forEachAddress(data) {
        $('#addressRadio').html("")
        for (let i = 0; i < data.length; i++) {
            let temp = " <label class=\"form-check\" style=\"margin-bottom: 10px\">\n" +
                "                                        <input name=\"radio-3\" type=\"radio\" id = '" + data[i].id + "' class=\"form-check-input\" checked>\n" +
                "                                        <span class=\"form-check-label\">" +
                "<p>" + data[i].receiver_name + "," + data[i].receiver_phone + "</p>" +
                "<p>" + data[i].receiver_state + " " + data[i].receiver_city + " " + data[i].receiver_district + " " + data[i].receiver_address + "</p>" +
                "</span>\n" +
                "                                    </label>";
            $('#addressRadio').append(temp)
        }
    }

    function addOrder() {
        let cartPriceTotal = $('#cartPriceTotal').html();
        let cartNum = $('#cartNum').html();
        let order_shipping_id_radio = $('input:radio[name="radio-3"]:checked');
        let order_shipping_id = order_shipping_id_radio[0].id;
        let json = {
            payment: total,
            post_fee: post_fee,
            order_item: addOrderArray,
            order_shipping_id: order_shipping_id,
            shopping_cart_id: shopping_cart_id,
            buyer_message: buyer_message
        }
        if (parseInt(cartPriceTotal) === 0 || parseInt(cartNum) === 0) {
            alert('当前无选择要结算商品，请选择！')
            return;
        }
        if (confirm("是否确定进行结算！")) {
            let url = 'http://localhost:8888/cwjy/Order/insertList';
            let success = "结算成功！";
            let error = "结算失败！";
            let jsonArray = [];
            jsonArray[0] = json;
            let hh = ajaxUnifiedCallUpdateAndAdd(url, jsonArray, success, error);
            total = 0;
            post_fee = 0;
            shopping_cart_id = [];
            buyer_message = "";
        }
    }

</script>
<div style="width: 100%;float:right;bottom: 0;height: 70px">
    <div style="background-color: #ccc;height: 100%">
        <div class="card-body" style="font-weight: bold;font-size: 20px;text-shadow: 1px 1px 2px #000000;">
            <div style="float: right;margin-right: 4%">
                <button type="button" class="btn btn-pill btn-warning" style="color: #000;width: 200%"
                        onclick="addOrderInit()" data-toggle="modal"
                        data-target="#defaultModalPrimary">结算
                </button>
            </div>
            <div style="float: right;margin-right: 4%">
                <span>合计：  </span> <span style="color: orange;" id="cartPriceTotal">0</span>
            </div>
            <div style="float: right;margin-right: 4%">
                <span>已选中商品  </span> <span style="color: orange;" id="cartNum">0</span><span>  件</span>
            </div>
        </div>
    </div>
</div>
</body>
</html>